﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="KPIPage.aspx.cs" Inherits="FBKPI.Pages.KPIPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript">
    var oTable;
    var iTableCounter = 1;
    var oInnerTable;
    var TableHtml;
    var ParentID;
    $(document).ready(function () {
        mainmenu("#nav ul", "#nav li");
        mainmenu("#menu_wrap ul", "#menu_wrap li");

        $("#divdetail").hide();
        $("#divdetail").dialog({
            title: '<span class="header-text">KPI Form</span>',
            autoOpen: false,
            width: 800,
            height: 650,
            modal: true,
            resizable: false
        });

        //datatable section
        oTable = $("#KPITable").dataTable({
            "oLanguage": {
                "sZeroRecords": "No records to display",
                "sSearch": "Search"
            },
            "bSort": true,
            "bPaginate": true,
            "bAutoWidth": false,
            "bProcessing": true,
            "bServerSide": true,
            "bDestroy": true,
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "bDeferRender": true,
            "fnServerData": function (sSource, aoData, fnCallback) {
                $.ajax({
                    "dataType": 'json',
                    "type": "GET",
                    "url": "../Serializer/KPISerializer.ashx?User=" + $("#txt_user").val() + "&Year=" + $("#txt_selectyear").val(),
                    "data": aoData,
                    "success": fnCallback
                });
            },
            "aoColumns": [
            {
                "mData": "ID"
            },{
                "mData": "ID2"
            }, {
                "mData": "No"
            }, {
                "mData": "Description"
            }, {
                "mData": "isActive"
            }, {
                "mData": "GroupKPI"
            }, {
                "mData": "CategoryKPI"
            }, {
                "mData": "TypeKPI"
            }, {
                "mData": "SubTypeKPI"
            }, {
                "mData": "Periode"
            }, {
                "mData": "Weight"
            }, {
                "mData": "Status"
            }],
            "fnDrawCallback": function (oSettings) {
                if (oSettings.aiDisplay.length == 0) {
                    return;
                }

                var nTrs = $('#KPITable tbody tr');
                var iColspan = nTrs[0].getElementsByTagName('td').length;
                var sLastGroupKPIGroup = "";
                var sLastGroupKPICategory = "";
                var sLastGroupKPIType = "";
                var sLastGroupKPISubType = "";

                var cleansegroup1 = "";
                var cleansegroup2 = "";
                var cleansegroup3 = "";
                var cleansegroup4 = "";

                var index1 = "";
                var index2 = "";
                var index3 = "";
                var index4 = "";

                for (var i = 0; i < nTrs.length; i++) {
                    var iDisplayIndex = oSettings._iDisplayStart + i;
                    var sGroupKPIGroup = oSettings.aoData[oSettings.aiDisplay[i]]._aData.GroupKPI;
                    var sGroupKPICategory = oSettings.aoData[oSettings.aiDisplay[i]]._aData.CategoryKPI;
                    var sGroupKPIType = oSettings.aoData[oSettings.aiDisplay[i]]._aData.TypeKPI;
                    var sGroupKPISubType = oSettings.aoData[oSettings.aiDisplay[i]]._aData.SubTypeKPI;
                    if (sGroupKPIGroup != sLastGroupKPIGroup) {
                        var nGroupKPIGroup = document.createElement('tr');
                        var nCellKPIGroup = document.createElement('td');

                        index1 = index1 + 1;
                        index2 = 0;
                        index3 = 0;
                        index4 = 0;

                        nCellKPIGroup.colSpan = iColspan;
                        nCellKPIGroup.className = "group index1" + index1;
                        nCellKPIGroup.innerHTML = '<b>' + sGroupKPIGroup + '</b>';
                        nGroupKPIGroup.appendChild(nCellKPIGroup);
                        nTrs[i].parentNode.insertBefore(nGroupKPIGroup, nTrs[i]);
                        sLastGroupKPIGroup = sGroupKPIGroup;
                    }
                    if (sGroupKPICategory != sLastGroupKPICategory) {
                        var nGroupKPICategory = document.createElement('tr');
                        var nCellKPICategory = document.createElement('td');

                        index2 = index2 + 1;
                        index3 = 0;
                        index4 = 0;

                        nCellKPICategory.colSpan = iColspan;
                        nCellKPICategory.className = "group2 index1" + index1 + " index2" + index2;
                        nCellKPICategory.innerHTML = sGroupKPIGroup + ' > <b>' + sGroupKPICategory + '</b>';
                        nGroupKPICategory.appendChild(nCellKPICategory);
                        nTrs[i].parentNode.insertBefore(nGroupKPICategory, nTrs[i]);
                        sLastGroupKPICategory = sGroupKPICategory;
                    }
                    if (sGroupKPIType != sLastGroupKPIType) {
                        var nGroupKPIType = document.createElement('tr');
                        var nCellKPIType = document.createElement('td');

                        index3 = index3 + 1;
                        index4 = 0;

                        nCellKPIType.colSpan = iColspan;
                        nCellKPIType.className = "group3 index1" + index1 + " index2" + index2 + " index3" + index3;
                        nCellKPIType.innerHTML = sGroupKPIGroup + ' > ' + sGroupKPICategory + ' > <b>' + sGroupKPIType + '</b>';
                        nGroupKPIType.appendChild(nCellKPIType);
                        nTrs[i].parentNode.insertBefore(nGroupKPIType, nTrs[i]);
                        sLastGroupKPIType = sGroupKPIType;
                    }
                    if (sGroupKPISubType != sLastGroupKPISubType) {
                        var nGroupKPISubType = document.createElement('tr');
                        var nCellKPISubType = document.createElement('td');

                        index4 = index4 + 1;

                        nCellKPISubType.colSpan = iColspan;
                        nCellKPISubType.className = "group4 index1" + index1 + " index2" + index2 + " index3" + index3 + " index4" + index4;
                        nCellKPISubType.innerHTML = sGroupKPIGroup + ' > ' + sGroupKPICategory + ' > ' + sGroupKPIType + ' > <b>' + sGroupKPISubType + '</b>';
                        nGroupKPISubType.appendChild(nCellKPISubType);
                        nTrs[i].parentNode.insertBefore(nGroupKPISubType, nTrs[i]);
                        sLastGroupKPISubType = sGroupKPISubType;
                    }
                    $(nTrs[i]).addClass("group4 index1" + index1 + " index2" + index2 + " index3" + index3 + " index4" + index4);
                }
            },
            "aaSortingFixed": [[7, 'asc']],
            "aoColumnDefs": [{
                "fnRender": function (oObj) {
                    return "<a href=\"#\" onclick=\"OnDetail('" + oObj.aData["ID"] + "')\"><img src='../images/detail.png' /></a>";
                },
                "aTargets": [0]
            }, {
                "fnRender": function (oObj) {
                    return "<img src='../images/plus.gif' class='imagetree'/>";
                },
                "aTargets": [0]
            }, {
                "fnRender": function (oObj) {
                    if (oObj.aData["isActive"] == 'True') {
                        return "<img src='../images/check.png' />"
                    } else {
                        return "<img src='../images/cross.png' />"
                    }
                },
                "aTargets": [3]
            }, {
                "sClass": "center",
                "aTargets": [0, 3, 9, 11]
            }]
        });

        //mark selected row
        $('body').on("click", '#KPITable tbody tr', function () {
            $('#KPITable tbody tr').removeClass("row_selected");
            $(this).addClass("row_selected");
        });
        //--------------------end of mark selected row-----------------------------
        $("#KPITable_filter label").after('&nbsp;KPI Year: <input id=\"txt_selectyear\" oninput=\'GetList($(this).val());\' type=\"text\" \>&nbsp;<button id=\"btnAddNew\" style="right: 0px;" onclick=\'OnDetail(0);return false;\'>New Record</button>&nbsp;<button id=\"btnImportExcel\" style="right: 0px;" onclick=\'ImportExcel("kpi");return false;\'>Import</button>');
        //--------------------end of datatable section-----------------------------------------

        $("#KPITable tbody tr td").live('click', function () {
            var group = ($(this).attr('class'));

            if (group.indexOf('group4') >= 0) {
                var classes = group.toString().split(' ');
                var idx1 = classes[1].replace('index1', '');
                var idx2 = classes[2].replace('index2', '');
                var idx3 = classes[3].replace('index3', '');
                var idx4 = classes[4].replace('index4', '');

                if ($("tr.group4.index1" + idx1 + ".index2" + idx2 + ".index3" + idx3 + ".index4" + idx4).is(":visible")) {
                    $("tr.group4.index1" + idx1 + ".index2" + idx2 + ".index3" + idx3 + ".index4" + idx4).hide();
                    $(this).show();
                }

                else {
                    $("tr.group4.index1" + idx1 + ".index2" + idx2 + ".index3" + idx3 + ".index4" + idx4).show();
                    $(this).show();
                }
            }
            else if (group.indexOf('group3') >= 0) {
                var classes = group.toString().split(' ');
                var idx1 = classes[1].replace('index1', '');
                var idx2 = classes[2].replace('index2', '');
                var idx3 = classes[3].replace('index3', '');

                if ($("td.group4.index1" + idx1 + ".index2" + idx2 + ".index3" + idx3).is(":visible")) {
                    $("td.group3.index1" + idx1 + ".index2" + idx2 + ".index3" + idx3).hide();
                    $("td.group4.index1" + idx1 + ".index2" + idx2 + ".index3" + idx3).hide();
                    $("tr.group4.index1" + idx1 + ".index2" + idx2 + ".index3" + idx3).hide();
                    $(this).show();
                }

                else {
                    $("td.group3.index1" + idx1 + ".index2" + idx2 + ".index3" + idx3).show();
                    $("td.group4.index1" + idx1 + ".index2" + idx2 + ".index3" + idx3).show();
                    $("tr.group4.index1" + idx1 + ".index2" + idx2 + ".index3" + idx3).show();
                    $(this).show();
                }
            }
            else if (group.indexOf('group2') >= 0) {
                var classes = group.toString().split(' ');
                var idx1 = classes[1].replace('index1', '');
                var idx2 = classes[2].replace('index2', '');

                if ($("td.group3.index1" + idx1 + ".index2" + idx2).is(":visible")) {
                    $("td.group2.index1" + idx1 + ".index2" + idx2).hide();
                    $("td.group3.index1" + idx1 + ".index2" + idx2).hide();
                    $("td.group4.index1" + idx1 + ".index2" + idx2).hide();
                    $("tr.group4.index1" + idx1 + ".index2" + idx2).hide();
                    $(this).show();
                }

                else {
                    $("td.group2.index1" + idx1 + ".index2" + idx2).show();
                    $("td.group3.index1" + idx1 + ".index2" + idx2).show();
                    $("td.group4.index1" + idx1 + ".index2" + idx2).show();
                    $("tr.group4.index1" + idx1 + ".index2" + idx2).show();
                    $(this).show();
                }
            }
            else if (group.indexOf('group') >= 0) {
                var classes = group.toString().split(' ');
                var idx1 = classes[1].replace('index1', '');

                if ($("td.group2.index1" + idx1).is(":visible")) {
                    $("td.group.index1" + idx1).hide();
                    $("td.group2.index1" + idx1).hide();
                    $("td.group3.index1" + idx1).hide();
                    $("td.group4.index1" + idx1).hide();
                    $("tr.group4.index1" + idx1).hide();
                    $(this).show();
                }

                else {
                    $("td.group.index1" + idx1).show();
                    $("td.group2.index1" + idx1).show();
                    $("td.group3.index1" + idx1).show();
                    $("td.group4.index1" + idx1).show();
                    $("tr.group4.index1" + idx1).show();
                    $(this).show();
                }
            }
        });

        $('#KPITable tbody td img.imagetree').live('click', function () {
            var nTr = $(this).parents('tr')[0];

            var rowIndex = oTable.fnGetPosition($(this).parents('tr')[0]);
            var aData = oTable.fnGetData(rowIndex);
            var ParentID = aData.ID.toString().replace("<a href=\"#\" onclick=\"OnDetail('", "").replace("')\"><img src='../images/detail.png' /></a>", "");

            TableHtml = $("#TempTable").html(); ;

            if (oTable.fnIsOpen(nTr)) {
                /* This row is already open - close it */
                this.src = "../images/plus.gif";
                oTable.fnClose(nTr);
            }
            else {
                /* Open this row */
                this.src = "../images/minus.gif";
                oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, TableHtml), 'Expand');
                oInnerTable = $("#KPITable_" + iTableCounter).dataTable({
                    "oLanguage": {
                        "sZeroRecords": "No records to display",
                        "sSearch": "Search"
                    },
                    "bSort": false,
                    "sSearch": false,
                    "bPaginate": true,
                    "bAutoWidth": false,
                    "bProcessing": true,
                    "bServerSide": true,
                    "bDestroy": true,
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "bDeferRender": true,
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        $.ajax({
                            "dataType": 'json',
                            "type": "GET",
                            "url": "../Serializer/KPIChildExpandSerializer.ashx?User=" + $("#txt_user").val() + "&KPIParent=" + ParentID,
                            "data": aoData,
                            "success": fnCallback
                        });
                    },
                    "aoColumns": [{
                        "mData": "No"
                    }, {
                        "mData": "Description"
                    }, {
                        "mData": "isActive"
                    }, {
                        "mData": "GroupKPI"
                    }, {
                        "mData": "CategoryKPI"
                    }, {
                        "mData": "TypeKPI"
                    }, {
                        "mData": "SubTypeKPI"
                    }, {
                        "mData": "Periode"
                    }],
                    "aoColumnDefs": [{
                        "fnRender": function (oObj) {
                            if (oObj.aData["isActive"] == 'True') {
                                return "<img src='../images/check.png' />"
                            } else {
                                return "<img src='../images/cross.png' />"
                            }
                        },
                        "aTargets": [2]
                    }, {
                        "sClass": "center",
                        "aTargets": [0, 2]
                    }]
                });
                iTableCounter = iTableCounter + 1;
            }
        });


        OnDetail = function (code) {
            LoadForm('KPIForm.aspx?ID=' + code, function (result) {
                $("#divdetail").html(result);
                $("#divdetail").dialog('open');
            });
            return false;
        }

        ImportExcel = function (mode) {
            var winFeature = "dialogHeight:200;dialogWidth:500;center:yes;resizeable:no;scroll:yes";
            window.showModalDialog("../Tools/ImportExcel/ImportExcel.aspx?mode=" + mode + "&User=" + $("#txt_user").val(), null, winFeature);
        }

        GetList = function (value) {
            if (value.length > 0) {
                var xx = '0123456789';
                if (xx.indexOf(value[value.length - 1]) < 0) {
                    $("#txt_selectyear").val(value.toString().replace(value[value.length - 1], ''));
                }

                if (value.length == 4) {
                    oTable.fnDraw();
                }
            }
            else
            { oTable.fnDraw(); }
        }
    });
    
    function fnFormatDetails(table_id, html) {
        var sOut = "<table cellpadding=\"0\" cellspacing=\"0\" class=\"ExpandTable\" id=\"KPITable_" + table_id + "\">";
        sOut += html;
        sOut += "</table>";
        return sOut;
    }
</script>
<style>
    .Expand .fg-toolbar{display: none;}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div style="height:525px;overflow:auto;" >
    <div id="kpitable"> 
        <div>
            <div class="customPageHeader">
                <span class="customPageTitle">Set KPI</span>
            </div>
            <div class="ui-widget-content">
                <table cellpadding="0" cellspacing="0" class="display" id="KPITable">
                    <thead>
                        <tr>
                         <th>
                            </th>
                            <th>
                            </th>
                            <th>
                                No
                            </th>
                            <th>
                                KPI Description
                            </th>
                            <th>
                                is Active
                            </th>
                            <th>
                                Group
                            </th>
                            <th>
                                Category
                            </th>
                            <th>
                                Type
                            </th>
                            <th>
                                Sub Type
                            </th>
                            <th>
                                Periode
                            </th>
                            <th>
                                Weight
                            </th>
                            <th>
                                Status
                            </th>
                           
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>       
            </div>
        </div>
        <br />
    </div>
    <div id="divdetail"></div>    
    <div id="divTemp" style="display:none">
        <table id="TempTable">
            <thead>
                <tr>
                    <th>
                        No
                    </th>
                    <th>
                        KPI Description
                    </th>
                    <th>
                        is Active
                    </th>
                    <th>
                        Group
                    </th>
                    <th>
                        Category
                    </th>
                    <th>
                        Type
                    </th>
                    <th>
                        Sub Type
                    </th>
                    <th>
                        Periode
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>       
    </div>  
    </div>  
</asp:Content>
